<template>
  <FormProvider :form="form">
    <SchemaField :schema="formSchema" />
    <Submit @click="submitForm">提交</Submit>
  </FormProvider>
</template>

<script setup>
import { ref } from 'vue';
import { createForm } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/vue';
import { Submit,FormItem,Input } from '@formily/antdv-x3';
import 'ant-design-vue/dist/antd.css';

const { SchemaField } = createSchemaField({
  components: {
    Input,
    Submit,
    FormItem
  }
});

// 创建表单实例
const form = ref(createForm());

// 定义表单的 schema 数据
const formSchema = {
  type: 'object',
  properties: {
    input: {
      type: "string",
      title: "账号",
      required: true,
      "x-decorator": "FormItem",
      "x-component": "Input",
      "x-component-props": {
        placeholder: "请输入",
        allowClear: true,
      },
    },
    email: {
      type: 'string',
      'x-component': 'Input',
      "x-decorator": "FormItem",
      title: '邮箱',
      required: true,
      description: '请输入有效的邮箱地址',
      'x-rules': [
        { required: true, message: '邮箱地址为必填项' },
        { type: 'email', message: '请输入有效的邮箱地址' }
      ]
    },
    password: {
      type: 'string',
      'x-component': 'Input.Password',
      title: '密码',
      description: '请输入至少 6 位密码',
      'x-rules': [
        { required: true, message: '密码为必填项' },
        { min: 6, message: '密码长度不能少于 6 个字符' }
      ]
    }
  }
};

// 提交表单的方法
const submitForm = async () => {
  try {
    // 验证表单
    await form.value.validate();
    console.log('表单验证通过，数据：', form.value.values);
  } catch (errors) {
    console.log('表单验证失败：', errors);
  }
};
</script>